import React, {Component} from 'react'
import { Link } from 'react-router'
import './sm-extend.min.css'
import './sm.min.css'
import './index.css'
import $ from 'jquery'

class Userlistbar extends Component{
    constructor(){
        super();
    }
    render(){
        return(
            <div>
            <nav className="bar bar-tab">
            <Link className="tab-item external " to="/content">
            <span className="icon icon-edit"></span>
            <span className="tab-label">写信</span>
            </Link>
            <Link className="tab-item external" to="/inbox">
            <span className="icon icon-message"></span>
            <span className="tab-label">收件箱</span>
            <span className="badge">2</span>
            </Link>
            <Link className="tab-item external active txl" to="/userlist">
            <span className="icon icon-friends"></span>
            <span className="tab-label">通讯录</span>
            </Link>
            </nav>
            </div>
    )

    }
    componentDidMount=()=> {
    $('.txl').click(function(){
        localStorage.removeItem('forname');
    })
    let username = localStorage.getItem('name');
        let data={
        username:username,
    }
    $.post('http://127.0.0.1:8080/inboxlength',data,function(data,textStatus,xhr){
    $('.badge').text(data);
})

}

}


export default Userlistbar